<template>
    <div class="classification">
       <el-card>
        <el-button type="primary"  @click="addone">添加分类</el-button>
        <!-- 表格 -->
         <el-table
    :data="list"
    style="width: 100%;margin-bottom: 20px;"
    row-key="cat_id"
    border
    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
     <el-table-column
      type="index"
      label="#">
    </el-table-column>
    <!-- <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item >
            <span>{{ props.row.category }}</span>
          </el-form-item>
         
        </el-form>
      </template>
    </el-table-column> -->
    <el-table-column
      label="分类名称"
      prop="cat_name">
    </el-table-column>
    <el-table-column
      label="是否有效"
      prop="name">
      <template slot-scope="props">
       <el-button type="success" icon="el-icon-check" size="mini"  circle></el-button>
      </template>
    </el-table-column>
    <el-table-column
      label="排序"
      prop="cat_level">
      <template slot-scope="props">
      <el-tag  effect="dark" v-show="props.row.cat_level==0" >一级</el-tag>
      <el-tag  effect="dark" type="success"   v-show="props.row.cat_level==1" >二级</el-tag>
      <el-tag  effect="dark"  type="warning" v-show="props.row.cat_level==2" >三级</el-tag>
      </template>
    </el-table-column>
    <!-- 操作 -->
    <el-table-column
      label="操作"
      prop="cat_level">
      <template slot-scope="props">
        <el-button type="primary" icon="el-icon-edit" size="mini"  @click="edit(props.row)">编辑</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="dels(props.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
   <!-- 添加模态框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
   <el-form-item label="分类名称" prop="cat_name" :label-width="formLabelWidth">
    <el-input v-model="ruleForm.cat_name"></el-input>
  </el-form-item>
    <el-form-item label="父级分类" :label-width="formLabelWidth" v-show="classtype==true">
        <el-cascader
        v-model="value"
         :options="list"
         @change="handleChange"
        :props="{ checkStrictly: true,expandTrigger: 'hover' , value:'cat_id' ,label:'cat_name'}"
       clearable> 
        <template slot-scope="{ node, data }">
        <span>{{ data.cat_name }}</span>
        <!-- <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span> -->
  </template>
       </el-cascader>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addclass(), dialogFormVisible = false">确 定</el-button>
  </div>
    </el-dialog>

  <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="from.pagenum"
      :page-sizes="[3,5,8,10]"
      :page-size="from.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
       </el-card>
    </div>
</template>
<script>
import {
  goodsAdministration,
  addGoodsCategory,
  deleteGoodsCategory,
  editGoodsCategory
} from "@/utils/goods";
export default {
  data() {
    return {
      value: [],
      list: [],
      
      total: 10,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      ruleForm: {
        cat_name: "",
        cat_pid: 0,
        cat_level: 0
      },
      rules: {
        cat_name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 1, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      },
      from: {
        type: [3],
        pagenum: 1,
        pagesize: 10
      },
      editID:0,
      classtype: true,
      title: "添加商品分类"
    };
  },
  methods: {
    // 封装渲染
    getdatas() {
      goodsAdministration(this.from).then(res => {
        console.log(res);
        this.list = res.data.data.result;
        this.total = res.data.data.total;
      });
    },
    // 分页
    handleSizeChange(val) {
      this.from.pagesize = val;
      this.getdatas();
      console.log(`每页 ${val} 条`);
    },

    handleCurrentChange(val) {
      this.from.pagenum = val;
      this.getdatas();
      console.log(`当前页: ${val}`);
    },
    // 点击添加
    addone() {
      this.dialogFormVisible = true;
    },
    // 确定添加
    addclass() {
      //添加分类
      if (this.classtype) {
        this.title = "添加商品分类";
        addGoodsCategory(this.ruleForm).then(res => {
          console.log(38, res);
          if (res.data.meta.status == 201) {
            this.$message({
              type: "success", // success error warning
              message: res.data.meta.msg
            });
            this.getdatas();
          }
        });
        (this.dialogFormVisible = false),
          (this.ruleForm = {
            cat_name: "",
            cat_pid: 0,
            cat_level: 0
          });
      }else{
        // 确定编辑
        editGoodsCategory(this.editID,this.ruleForm).then(res=>{
          console.log(res);
          if (res.data.meta.status==200) {
            this.$message({
              type: "success", // success error warning
              message: res.data.meta.msg
            });
            this.getdatas();
            
          }
        })

      }
    },
    // 编辑回填
    edit(row) {
      console.log(row);
      this.editID=row.cat_id
      this.dialogFormVisible = true;
      this.title = "编辑分类";
      this.classtype = false;
      this.ruleForm.cat_name =row.cat_name;
      console.log(this.ruleForm.cat_name);
    },
    // 删除
    dels(row) {
      this.$confirm("此操作将永久删除该活动, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteGoodsCategory(row.cat_id).then(res => {
            console.log(res);
            if (res.data.meta.status == 200) {
              this.$message({
                type: "success", // success error warning
                message: res.data.meta.msg
              });
              this.getdatas();
            }
          });
        })
        .catch(() => {});
    },
    handleChange() {
      this.ruleForm.cat_pid = this.value[this.value.length - 1];
      this.ruleForm.cat_level = this.value.length;
      console.log(this.ruleForm);
    }
  },
  created() {
    // 渲染
    this.getdatas();
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-button--mini.is-circle{
  padding: 0 !important;
  margin:0 auto;
}
</style>

